<template>
  <div
    class="mask"
    v-if="showCart && calculations.total > 0"
    @click="handleCartShowChange"
  />
  <div class="cart">
    <div class="product" v-if="showCart && calculations.total > 0">
      <div class="product__header">
        <p class="cart__select" @click="() => setCartItemsChecked(shopId)">
          <!-- <span
            class="cart__select__icon iconfont"
            v-html="calculations.allChecked ? '&#xe652;' : '&#xe905;'">
            &#xe652; </span>全选 -->
        </p>
        <span class="cart__empty" @click="() => emptyCartProducts(shopId)"
          >清空购物车</span
        >
      </div>
      <ul class="product">
        <li class="product__item" v-for="item in productsList" :key="item._id">
          <span
            class="product__item__checked iconfont"
            v-html="item.check ? '&#xe652;' : '&#xe905;'"
            @click="() => changeCartItemChecked(shopId, item._id)"
          ></span>
          <img :src="item.imgUrl" alt="" class="product__item__img" />
          <div class="product__item__details">
            <h4 class="product__item__name">{{ item.name }}</h4>
            <p class="product__item__price">
              <span class="product__item__yen"
                >&yen;<i>{{ item.price }}</i></span
              >
              <span class="product__item__origin"
                >&yen;{{ item.oldPrice }}</span
              >
            </p>
            <div class="product__number">
              <span
                class="product__number__reduce iconfont"
                @click="
                  () => {
                    changeCartItemInfo(shopId, item._id, item, -1);
                  }
                "
                >&#xeb41;</span
              >
              <span class="product__number__num">
                {{ item.count || 0 }}
              </span>
              <span
                class="product__number__increase iconfont"
                @click="
                  () => {
                    changeCartItemInfo(shopId, item._id, item, 1);
                  }
                "
                >&#xe627;</span
              >
            </div>
          </div>
        </li>
      </ul>
    </div>
    <div class="check">
      <div class="check__left">
        <div class="check__icon">
          <img
            src="http://www.dell-lee.com/imgs/vue3/basket.png"
            alt=""
            class="check__icon__img"
            @click="handleCartShowChange"
          />
          <i class="check__icon__tag">{{ calculations.total }}</i>
        </div>
        <div class="check__info">
          <p class="check__info__price">
            总计：<span class="check__price__num"
              >&yen; {{ calculations.price }}</span
            >
          </p>
        </div>
      </div>
      <div class="check__right">
        <button class="check__right__btn" v-show="calculations.total > 0">
          <router-link :to="{ path: `/orderConfirmation/${shopId}` }">
            去结算
          </router-link>
        </button>
      </div>
    </div>
  </div>
</template>

<script>
import { ref } from "vue";
import { useStore } from "vuex";
import { useRoute } from "vue-router";
import { usecommonCartEffect } from "../../effects/cartEffects";

// 获取购物车信息的逻辑
const useCartEffect = (shopId) => {
  const store = useStore();
  const { productsList, changeCartItemInfo, calculations } =
    usecommonCartEffect(shopId);

  const changeCartItemChecked = (shopId, productId) => {
    store.commit("changeCartItemChecked", { shopId, productId });
  };

  const emptyCartProducts = (shopId) => {
    store.commit("emptyCartProducts", { shopId });
  };

  const setCartItemsChecked = (shopId) => {
    store.commit("setCartItemsChecked", { shopId });
  };

  return {
    calculations,
    productsList,
    changeCartItemInfo,
    changeCartItemChecked,
    emptyCartProducts,
    setCartItemsChecked,
  };
};

//展示隐藏购物车逻辑
const toggleCartEffect = () => {
  const showCart = ref(false);
  const handleCartShowChange = () => {
    showCart.value = !showCart.value;
  };
  return { showCart, handleCartShowChange };
};

export default {
  name: "Cart",
  setup() {
    const route = useRoute();
    const shopId = route.params.id;
    const { showCart, handleCartShowChange } = toggleCartEffect();
    const {
      calculations,
      productsList,
      changeCartItemInfo,
      changeCartItemChecked,
      emptyCartProducts,
      setCartItemsChecked,
    } = useCartEffect(shopId);
    return {
      calculations,
      shopId,
      productsList,
      changeCartItemInfo,
      changeCartItemChecked,
      emptyCartProducts,
      setCartItemsChecked,
      showCart,
      handleCartShowChange,
    };
  },
};
</script>

<style lang="scss" scoped>
@import "../../style/viriables.scss";
@import "../../style/mixins.scss";
.mask {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1;
}
.cart {
  position: absolute;
  width: 100%;
  height: 0.5rem;
  left: 0;
  bottom: 0;
  box-shadow: 0 -0.01rem 0.01rem 0 $content-gbcolor;
  background-color: #fff;
  z-index: 999;
}
.cart div.product {
  position: absolute;
  left: 0;
  bottom: 0.5rem;
  padding: 0;
  width: 100%;
  background-color: #fff;
  z-index: 999;
}
.cart ul.product {
  border-bottom: none;
  padding: 0 0.184rem;
}
.product {
  // height: 100%;
  padding: 0 0.16rem;
  overflow-y: scroll;
  border-bottom: 0.01rem solid $content-gbcolor;
  &__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 0.52rem;
    padding: 0 0.184rem;
    background-color: #fff;
    border-bottom: 0.01rem solid #f1f1f1;
    .cart__select,
    .cart__empty {
      font-size: 0.14rem;
      color: $content-fontcolor;
      &__icon {
        font-size: 0.2rem;
        color: $cart-selectedcolor;
        margin-right: 0.084rem;
      }
    }
  }
  &__item {
    display: flex;
    padding: 0.12rem 0;
    &__checked {
      display: flex;
      align-items: center;
      font-size: 0.2rem;
      color: $cart-selectedcolor;
      margin-right: 0.164rem;
    }
    &:last-child {
      border-bottom: none;
    }
    &__img {
      width: 14.795%;
      margin-right: 0.16rem;
    }
    &__details {
      flex: 1;
      display: flex;
      justify-content: space-around;
      flex-direction: column;
      position: relative;
      overflow: hidden;
      .product__number {
        position: absolute;
        right: 0;
        bottom: 50%;
        margin-bottom: -0.1rem;
        &__reduce {
          position: relative;
          top: 0.02rem;
          font-size: 0.2rem;
          color: $content-numcolor;
        }
        &__increase {
          position: relative;
          top: 0.02rem;
          font-size: 0.2rem;
          color: $cart-selectedcolor;
        }
        &__num {
          font-size: 0.14rem;
          color: $content-fontcolor;
          line-height: 0.16rem;
          margin: 0 0.1rem;
        }
      }
    }
  }
}
.product__item__name {
  font-size: 0.14rem;
  color: $content-fontcolor;
  line-height: 0.2rem;
  @include ellipse;
}
.product__item__price span {
  font-size: 0.12rem;
  line-height: 0.2rem;
  transform: scale(-50%, -50%);
  transform-origin: center top;
}
.product__item__yen {
  color: #e93b3b;
  margin-right: 0.06rem;
}
.product__item__yen i {
  font-size: 0.14rem;
}
.product__item__origin {
  color: #999;
  text-decoration: line-through;
}
.check {
  display: flex;
  justify-content: space-between;
  height: 100%;
  &__left {
    flex: 1;
    display: flex;
    align-items: center;
    text-align: center;
  }
  &__icon {
    position: relative;
    &__img {
      width: 33.3333333%;
      vertical-align: middle;
    }
    &__tag {
      position: absolute;
      top: -0.04rem;
      right: 0.18rem;
      width: 0.2rem;
      height: 0.2rem;
      border-radius: 50%;
      background-color: $cart-color;
      font-size: 0.12rem;
      color: $content-fzcolor;
      line-height: 0.19rem;
      // 缩放比例
      transform: scale(0.5, 0.5);
      // 以中心点缩放
      transform-origin: center top;
    }
  }
  &__info {
    text-align: center;
    &__price {
      font-size: 0.12rem;
      color: $content-fontcolor;
    }
  }
  &__price__num {
    font-size: 0.18rem;
    color: $cart-color;
    font-weight: bold;
  }
  &__right {
    display: flex;
    &__btn {
      width: 0.98rem;
      height: 100%;
      font-size: 0.14rem;
      color: $content-fzcolor;
      line-height: 0.2rem;
      border: none;
      background-color: $cart-bgcolor;
      a {
        color: $content-fzcolor;
      }
    }
  }
}
</style>
